<template>
	<view>
		<!-- $tab.nav(`/pages/commodity/detail?id=${zichanId}`) -->
		<uni-nav-bar title="公社资产包" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true"
			:border="false"></uni-nav-bar>

		<div class="py-32 px-20">
			<div class="zichan" v-for="item in list" :key="item.name.id">
				<div class="px-32 py-28 text-32 font-500">
					{{item.name.name}}
				</div>

				<div class="px-12 flex items-center justify-between mt-16">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_l@2x.png"
						style="min-width: 38rpx;margin-right: 8rpx;width: 38rpx;" mode="widthFix"
						@click="handleLeft(item)"></image>

					<div class="scroll-wrap">
						<scroll-view scroll-x class="scroll" :scroll-left="item.scroll" :scroll-into-view="item.scrollId">
							<div class="flex items-center">
								<div :id="`sc-${i.id}`" class="scroll-li flex flex-col items-center justify-between"
									v-for="(i,j) in item.spuList" :key="i.id" :style="{
									color: i.state == 0 ? '#909090' : i.state == 1 ? '#FFFFFF' : '#F06934',
									background:i.state == 1 ? '#F90E3D' : '#FFF'
								}">
									<div class="">
										{{j+1}}
									</div>
									<div class="text-24">
										{{i.state == 0 ? '已售罄' : i.state == 1 ? '进行中' : '未开始'}}
									</div>
								</div>
							</div>
						</scroll-view>
					</div>

					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_r@2x.png"
						style="min-width: 38rpx;margin-left: 8rpx;width: 38rpx;" mode="widthFix"
						@click="handleRight(item)"></image>
				</div>

				<div class="px-12 mt-20">
					<div class="content flex items-center" v-if="detail" @click="$tab.nav(`/pages/commodity/detail?id=${detail.id}`)">
						<image :src="globalConfig.imagePrefix + detail.cover" class="prodImg" mode=""></image>
						
						<div class="ml-28 py-24">
							<div class="font-500">
								{{detail.name}}
							</div>
							<div class="progress-wrap mt-32 relative">
								<div class="progress relative" :style="{
									width:detail.useNum + '%'
								}">
									<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_jindu@2x.png" class="jindu" mode=""></image>
								</div>
							</div>
							
							<div class="flex items-center justify-between mt-32">
								<div class="">
									<span>￥</span>
									<span class="text-48">{{detail.price}}</span>
								</div>
								
								<div class="confirm text-FFF">抢购</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				globalConfig:getApp().globalData.config,
				detail:{}
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$Api.index.communityAssets()
				console.log(res)
				this.list = res.data.map(item => {
					return {
						...item,
						scroll: "",
						scrollId: `sc-${item.spuList[item.runing-1].id}`
					}
				})
				
				res.data.forEach(item=>{
					for(let i=0;i<item.spuList.length;i++){
						if(item.spuList[i].state == 1){
							this.detail = item.spuList[i]
						}
					}
				})
				console.log(this.detail)
			},
			handleLeft(item) {
				item.scroll -= 20
				if (item.scroll < 0) {
					item.scroll = 0
				}
			},
			handleRight(item) {
				item.scroll += 20
				if (item.scroll > item.spuList.length * 120) {
					item.scroll = item.spuList.length * 120
				}
			}
		}
	}
</script>

<style lang="scss">
	.zichan {
		height: 478rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/zhichan_bg@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.scroll-wrap {
		width: 592rpx;

		.scroll {
			width: 100%;
			white-space: nowrap;

			.scroll-li {
				width: 112rpx;
				height: 112rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 12rpx 20rpx 18rpx 20rpx;
				margin-right: 8rpx;
			}
		}
	}

	.content {
		height: 204rpx;
		background: #F6F6F6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		
		.prodImg{
			width: 204rpx;
			height: 204rpx;
		}
		
		.progress-wrap{
			width: 432rpx;
			height: 16rpx;
			background: #CBC8C5;
			border-radius: 116rpx;
			
			.progress{
				height: 100%;
				background-color: #FF333B;
				border-radius: 116rpx;
				
				.jindu{
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 0;
					top: -4rpx;
				}
			}
		}
		
		.confirm{
			width: 124rpx;
			height: 60rpx;
			background: #141414;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
</style>